<template>
	<el-container>
		<el-header>
			<el-button type="primary" @click="add_bt">添加</el-button>
		</el-header>
		<el-main>
			<el-table :data="list" style="width: 100%">
				<el-table-column label="排序" prop="sort">
				</el-table-column>
				
				<el-table-column label="封面" >
					<template slot-scope="scope">
						<el-image
						      style="width: 50px; height: 50px"
						      :src="$get_img+scope.row.image"></el-image>
					</template>
				</el-table-column>
				
				<el-table-column label="名称" prop="name">
				</el-table-column>
				
				<el-table-column label="类型" >
					<template slot-scope="scope">
						{{type[scope.row.type]}}
					</template>
				</el-table-column>
				
				<el-table-column label="状态" >
					<template slot-scope="scope">
						{{hidden[scope.row.hidden]}}
					</template>
				</el-table-column>
				
				<el-table-column label="跳转到" >
					<template slot-scope="scope">
						<div v-if="scope.row.type==1&&scope.row.article">{{scope.row.article.name}}</div>
						<div v-if="scope.row.type==2&&scope.row.project">{{scope.row.project.name}}</div>
						<div v-if="scope.row.type==3">{{scope.row.value}}</div>
					</template>
				</el-table-column>
				
				<el-table-column align="right">
					<template slot-scope="scope">
						<el-button size="mini" @click="edit_bt(scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="del(scope.row.id)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-dialog :title="edit_type==0?'添加':'编辑'" :visible.sync="visible" width="40%" :before-close="handleClose">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="名称">
						<el-input v-model="form.name" class="input"></el-input>
					</el-form-item>
					<el-form-item label="图片">
						<Pic :url="form.image" index="image" @get_url="get_url" @delImg="delImg"></Pic>
					</el-form-item>

					<el-form-item label="类型">
						<el-radio-group v-model="form.type" @change="form.value=''">
							<el-radio v-for="(item,index) in type" :key="index" :label="index">{{item}}</el-radio>
						</el-radio-group>
					</el-form-item>

					<el-form-item label="隐藏">
						<el-radio-group v-model="form.hidden">
							<el-radio v-for="(item,index) in hidden" :key="index" :label="index">{{item}}</el-radio>
						</el-radio-group>
					</el-form-item>

					<el-form-item label="排序">
						<el-input v-model="form.sort" type="number" class="input"></el-input>
					</el-form-item>

					<el-form-item label="页面地址" v-if="form.type==3">
						<el-input v-model="form.value" class="input"></el-input>
					</el-form-item>

					<el-form-item label="项目" v-if="form.type==2">
						<el-select v-model="form.value" filterable placeholder="请选择">
							<el-option v-for="(item,index) in project" :key="index" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					
					<el-form-item label="文章" v-if="form.type==1">
						<el-select v-model="form.value" filterable placeholder="请选择">
							<el-option v-for="(item,index) in article" :key="index" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>


					<el-form-item>
						<el-button type="primary" @click="submit">提交</el-button>
						<el-button type="primary" @click="handleClose">取消</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>

		</el-main>
		<el-footer>
			<el-pagination background layout="prev, pager, next" :page-size="search_form.num" :total="total"
				@current-change="current_change">
			</el-pagination>
		</el-footer>
	</el-container>
</template>
<script>
	import Pic from '../../components/UploadPicOne.vue'
	export default {
		components: {
			Pic
		},
		data() {
			return {
				list: [],
				article: [],
				project: [],
				hidden: ["不隐藏", "隐藏"],
				tableName: "banners",
				form: {
					name: "",
					image: "",
					type: 0,
					sort: 0,
					hidden: 0,
					value: "",
					table: this.tableName
				},
				total: 0,
				url: ["/cms/table/insert", "/cms/table/update"],
				edit_tips: ["添加成功", "修改成功"],
				edit_type: 0, //0添加1编辑
				visible: false,
				type: ["不跳转", "跳转到文章", "跳转到项目", "跳转到其它页面"],
				search_form: {
					table: "",
					page: 1,
					num: 5,
					where: null,
					orderBy: "id",
					asdes: "asc"
				}
			}
		},
		mounted() {
			this.get_data()
			this.get_article()
			this.get_project()
		},
		methods: {
			get_project() {
				let data = {
					"table": "houses",
					"select": ["id", "name"]
				}
				this.$model.post("cms/table/get_all", data).then(res => {
					if (res.code == 200) {
						this.project = res.data
					}
				})
			},
			get_url(e) {
				this.form[e.index] = e.url
			},
			delImg(e) {
				this.form[e] = ""
			},
			get_article() {
				let data = {
					"table": "articles",
					"select": ["id", "name"]
				}
				this.$model.post("cms/table/get_all", data).then(res => {
					if (res.code == 200) {
						this.article = res.data
					}
				})

			},
			get_data() {
				this.search_form.table = this.tableName
				const loading = this.$loading({
					lock: true,
					text: '加载中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});

				this.$model.post("cms/table/get", this.search_form).then(res => {
					if (res.code == 200) {
						loading.close();
						this.list = res.data.data
						this.total = res.data.total
					}
				})
			},
			handleClose() {
				this.visible = false
			},
			current_change(e) {
				this.search_form.page = e
				this.get_data()
			},
			edit_bt(row) {
				this.edit_type = 1
				this.form = row
				this.visible = true
			},
			submit() {
				this.form["table"] = this.tableName
				this.$model.post(this.url[this.edit_type], this.form).then(res => {
					if (res.code == 200) {
						this.$message({
							message: this.edit_tips[this.edit_type],
							type: 'success'
						});
						this.clear()
						this.get_data()
					}
				})

			},
			clear() {
				this.edit_type = 0
				this.handleClose()
				this.form = {
					name: "",
					image: "",
					type: 0,
					sort: 0,
					hidden: 0,
					value: "",
					table: this.tableName
				}
			},
			add_bt() {
				this.visible = true
				this.edit_type = 0

			},
			del(id) {
				let url = "cms/table/del?table=banners&id=" + id
				this.$model.put(url).then(res => {
					if (res.code == 200) {
						this.$message({
							message: '已删除',
							type: 'success'
						});
						this.search_form.page = 1
						this.get_data()
					}
				})
			}
		}
	}
</script>
<style>
	.input {
		width: 300px;
	}
</style>
